<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { getHpvuserOrder, getHpvCancel } from '@/apis/apis.js'
import point from '@/components/point.vue'
const data = ref([])
const handleCancel = async (item) => {
  if (!item.cancel) return
  await getHpvCancel({
    _id: item._id
  })
  item.cancel = false
}
onShow(async () => {
  const res = await getHpvuserOrder()
  console.log(res)
  data.value = res.data
})
</script>

<template>
  <view class="view">
    <view class="view-item" v-for="(item, index) in data" :key="index">
      <view class="view-item-header">{{ item.hpv_name }}</view>
      <view class="view-item-body">
        <view class="view-item-body-name">接种人：{{ item.name }}</view>
        <view class="view-item-body-address">接种地点：{{ item.address }}</view>
        <view class="view-item-body-type">疫苗套餐：{{ item.combo }} {{ item.ino_time }}</view>
        <view class="view-item-body-id">订单编号：{{ item.order_number }}</view>
      </view>
      <view class="view-item-footer">
        <view class="view-item-footer-price">￥{{ item.price }}</view>
        <view class="view-item-footer-button" :class="{ disabled: !item.cancel }" @click="handleCancel(item)">{{ item.cancel ? '取消预约' : '已取消预约' }}</view>
      </view>
    </view>
    <point v-if="data.length <= 0"></point>
  </view>
</template>

<style scoped lang="scss">
.view {
  padding-top: 20rpx;
  padding-bottom: env(safe-area-inset-bottom);
  min-height: 100vh;
  background-color: #f8f8f8;
  .view-item {
    margin: 0 20rpx 20rpx;
    padding: 20rpx;
    background-color: #fff;
    border-radius: 20rpx;
    .view-item-header {
      padding-bottom: 20rpx;
      border-bottom: 1px solid #f8f8f8;
      font-weight: bold;
    }
    .view-item-body {
      .view-item-body-name {
        margin: 20rpx 0;
      }
      .view-item-body-address {
        margin: 20rpx 0;
      }
      .view-item-body-type {
        margin: 20rpx 0;
      }
      .view-item-body-id {
        margin: 20rpx 0;
      }
    }
    .view-item-footer {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      .view-item-footer-price {
        margin: 20rpx 0;
      }
      .view-item-footer-button {
        padding: 10rpx 20rpx;
        border: 1px solid #4176e1;
        border-radius: 10rpx;
        color: #4176e1;
        &.disabled {
          border: 1px solid #f0f0f0;
          color: #f0f0f0;
        }
      }
    }
  }
}
</style>
